// 月销量情况
(function () {
  const colors = [
    [
      {
        offset: 0,
        color: "rgba(0, 168, 255,0.8)", // 0% 处的颜色
      },
      {
        offset: 0.35,
        color: "rgba(0, 102, 171, 0.42)", // 35% 处的颜色
      },
      {
        offset: 0.65,
        color: "rgba(0, 102, 171, 0.42)", // 65% 处的颜色
      },
      {
        offset: 1,
        color: "rgba(0, 168, 255,0.8)", // 100% 处的颜色
      },
    ],
    [
      {
        offset: 0,
        color: "rgba(0,255,182)", // 0% 处的颜色
      },
      {
        offset: 0.35,
        color: "rgba(0,255,182, 0.42)", // 35% 处的颜色
      },
      {
        offset: 0.65,
        color: "rgba(0,255,182, 0.42)", // 65% 处的颜色
      },
      {
        offset: 1,
        color: "rgba(0,255,182)", // 100% 处的颜色
      },
    ],
    [
      {
        offset: 0,
        color: "rgba(43,189,231, 0.9)", // 0% 处的颜色
      },
      {
        offset: 0.35,
        color: "rgba(43,189,231, 0.42)", // 35% 处的颜色
      },
      {
        offset: 0.65,
        color: "rgba(43,189,231, 0.42)", // 65% 处的颜色
      },
      {
        offset: 1,
        color: "rgba(43,189,231, 0.9)", // 100% 处的颜色
      },
    ],
  ];
  const barColors = [
    "rgba(0, 168, 255, 0.7)",
    "rgba(0,255,182, 0.7)",
    "rgba(43,189,231, 0.8)",
  ];
  // 实例化对象
  var myChart = echarts.init(document.getElementById("left-one-1"));
  // var dataArr = {
  //   categorys: ["精煤", "中煤", "煤泥"],
  //   xdata: [1, 2, 3, 4, 5, 6],
  //   result: [
  //     { name: "精煤", data: [220.0, 235.0, 200.0, 340.0, 320.01, 270.05] },
  //     { name: "中煤", data: [150.0, 220.0, 210.0, 210.0, 140.01, 180.05] },
  //     { name: "煤泥", data: [230.0, 120.0, 240.0, 280.0, 240.01, 180.05] },
  //   ],
  //   colors: colors,
  //   barColors: barColors,
  // };
  // var categorys = dataArr.categorys
  //   ? dataArr.categorys
  //   : ["精煤", "中煤", "煤泥"];
  // console.log(dataArr);
  // var options = getOptions(dataArr);
  // myChart.clear();
  // myChart.setOption(options);
  resetOption("");
  function resetOption(optionId) {
    $.ajax({
      type: "get", // 请求方式
      url: "http://localhost:8081/HZMD/monthSales", // 请求路径
      data: { queryOption: optionId },
      dataType: "json", // 预期返回一个 json 类型数据
      success: function (data) {
        // data是形参名，代表返回的数据
        console.log(data);
        dataArr = data.data;
        var categorys = dataArr.categorys
          ? dataArr.categorys
          : ["精煤", "中煤", "煤泥"];
        var index = categorys.indexOf(data.data.result[0].name);
        data.data.barColors = dataArr.categorys
          ? barColors
          : [barColors[index]];
        data.data.colors = dataArr.categorys ? colors : [colors[index]];
        var options = getOptions(data.data);
        myChart.clear();
        myChart.setOption(options);
      },
    });
    // if (optionId == "") {
    //   //查全部
    //   dataArr = {
    //     xdata: ["1", "2", "3", "4", "5", "6"],
    //     result: [
    //       {
    //         name: "精煤",
    //         //icon: "roundRect",
    //         data: [220, 235, 200, 340, 320, 270],
    //       },
    //       {
    //         name: "中煤",
    //         //icon: "roundRect",
    //         data: [150, 220, 210, 210, 140, 180],
    //       },
    //       {
    //         name: "煤泥",
    //         //icon: "roundRect",
    //         data: [230, 120, 240, 280, 240, 180],
    //       },
    //     ],
    //     colors: colors,
    //     barColors: barColors,
    //   };
    //   myChart.clear();
    //   myChart.setOption(getOptions(dataArr));
    // }
    // if (optionId == "1精煤") {
    //   //查1月精煤
    //   dataArr.xdata = [
    //     "本部",
    //     "汾河",
    //     "晋南",
    //     "晋北",
    //     "宏大",
    //     "五一",
    //     "晋牛",
    //     "吕梁",
    //   ];

    //   dataArr.result = [
    //     {
    //       name: "精煤",
    //       //icon: "roundRect",
    //       data: [220, 235, 200, 340, 320, 270, 210, 310],
    //     },
    //   ];
    //   var index = categorys.indexOf(dataArr.result[0].name);
    //   dataArr.barColors = [barColors[index]];
    //   dataArr.colors = [colors[index]];
    //   myChart.clear();
    //   myChart.setOption(getOptions(dataArr));
    // }
    // if (optionId == "1中煤") {
    //   //查1月精煤
    //   dataArr.xdata = [
    //     "本部",
    //     "汾河",
    //     "晋南",
    //     "晋北",
    //     "宏大",
    //     "五一",
    //     "晋牛",
    //     "吕梁",
    //   ];

    //   dataArr.result = [
    //     {
    //       name: "中煤",
    //       icon: "roundRect",
    //       data: [220, 235, 200, 340, 320, 270, 210, 310],
    //     },
    //   ];
    //   var index = categorys.indexOf(dataArr.result[0].name);
    //   dataArr.barColors = [barColors[index]];
    //   dataArr.colors = [colors[index]];
    //   myChart.clear();
    //   myChart.setOption(getOptions(dataArr));
    // }
    // if (optionId == "1精煤本部") {
    //   //查区域
    //   dataArr.xdata = ["辛置矿", "李雅庄矿", "团柏矿", "丰峪矿"];

    //   dataArr.result = [
    //     {
    //       name: "精煤",
    //       icon: "roundRect",
    //       data: [320, 270, 210, 310],
    //     },
    //   ];
    //   var index = categorys.indexOf(dataArr.result[0].name);
    //   dataArr.barColors = [barColors[index]];
    //   dataArr.colors = [colors[index]];
    //   myChart.clear();
    //   myChart.setOption(getOptions(dataArr));
    // }
  }

  function getOptions(dataArr) {
    console.log(dataArr);
    var diamondData = dataArr.result.reduce((pre, cur, index) => {
      pre[index] = cur.data.map(
        (el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0)
      );
      return pre;
    }, []);

    var series = dataArr.result.reduce((p, c, i, array) => {
      p.push(
        {
          stack: true,
          type: "bar",
          name: c.name,
          barWidth: 26,
          data: c.data,
          itemStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                x2: 1,
                y: 0,
                y2: 0,
                colorStops: dataArr.colors[i],
                global: false, // 缺省为 false
              },
              opacity: 0.8,
            },
          },
        },
        {
          z: i + 11,
          name: c.name,
          type: "pictorialBar",
          symbolPosition: "end",
          //symbol: "circle",
          symbolOffset: [0, -5],
          symbolSize: [26, 10],
          data: diamondData[i],
          itemStyle: {
            // color: {
            // 	type: 'linear',
            // 	x: 0, x2: 0, y: 0, y2: 1,
            // 	colorStops: color[i + 1]
            // },
            normal: {
              color: dataArr.barColors[i],
            },
          },
        }
      );

      return p;
    }, []);
    //console.log(diamondData);
    // 最上边顶
    series.push({
      name: dataArr.result[dataArr.result.length - 1].name,
      type: "pictorialBar",
      symbolOffset: [0, -5],
      symbolSize: [26, 10],
      z: 12,
      symbolPosition: "end",
      data: diamondData[diamondData.length - 1],
      //symbol: "circle",

      itemStyle: {
        normal: {
          color: dataArr.barColors[dataArr.barColors.length - 1],
        },
      },
      //tooltip: { show: false },
    });

    // 最下边底
    series.push({
      name: dataArr.result[0].name,
      type: "pictorialBar",
      symbolSize: [26, 10],
      symbolOffset: [0, 0],
      z: 12,
      itemStyle: {
        normal: {
          color: dataArr.barColors[0],
        },
      },
      //symbolPosition: "start",
      data: diamondData[0],
      // symbol: "circle",

      // tooltip: { show: false },
    });

    // 渲染
    var option = {
      //tooltip: { trigger: "item" },
      backgroundColor: "rgba(0,0,0,0)",
      // title: {
      //   text: "销量情况",
      //   left: "9%",
      //   top: "4%",
      //   textStyle: {
      //     color: "#fff",
      //     fontSize: "20",
      //   },
      // },
      legend: {
        orient: "horizontal",
        itemWidth: 15,
        itemHeight: 10,
        data: dataArr.result.map((item) => ({
          name: item.name,
          //icon: item.icon,
        })),
        top: "2%",
        textStyle: {
          color: "#DFDFDF",
        },
      },
      xAxis: {
        name: "月",
        type: "category",
        axisTick: { show: false },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#DFDFDF",
            fontSize: 14,
          },
          formatter: "{value}",
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
          },
        },
        offset: 10,
        data: dataArr.xdata,
      },
      yAxis: [
        {
          type: "value",
          min: 0,
          name: "万吨",
          nameTextStyle: {
            color: "#fff",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#676C7B",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#DFDFDF",
              fontSize: 14,
            },
          },
          splitLine: {
            //网格线
            show: false,
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
            },
          },
        },
      ],
      grid: {
        left: "2%",
        right: "6%",
        bottom: "5%",
        top: "15%",
        containLabel: true,
      },
      graphic: [
        {
          type: "text",
          right: 30,
          top: 10,
          style: {
            text: "返回",
            color: "#fff",
            fontSize: 12,
            fill: "white",
          },
          onclick: function () {
            goBack();
          },
        },
      ],
      // legend: {
      //   data: dataArr.result.map((item) => item.name),
      //   textStyle: { fontSize: 14, color: "#fff" },
      //   itemWidth: 25,
      //   itemHeight: 15,
      //   itemGap: 15,
      //   bottom: "5%",
      // },
      series: series,
    };
    return option;
  }
  var optionStack = [];
  var optionId = "";

  //跟随屏幕一起缩放
  myChart.on("click", "series", (params) => {
    console.log(params);
    if (optionStack.indexOf(params.name) < 0) {
      optionStack.push(params.name);
    }
    if (optionStack.indexOf(params.seriesName) < 0) {
      optionStack.push(params.seriesName);
    }
    console.log(optionStack);

    optionId = optionStack.join("");
    console.log(optionId);
    resetOption(optionId);
  });

  function goBack() {
    //返回
    console.log("===================");
    optionStack.pop();
    console.log(optionStack);
    if (optionStack.length === 0) return;
    if (optionStack.length === 1) optionStack = [];
    optionId = optionStack.join("");
    console.log(optionId);
    resetOption(optionId);
  }
  window.addEventListener("resize", myChart.resize());
})();
